<template>
  <van-popup
    round
    class="time-selector"
    v-model:show="visible"
    closeable
    position="bottom"
    :style="{ height: '60%' }"
    >
      <div class="head">
        选择配送时间
      </div>

      <div class="expect-time">
        已选配送时间：<span>{{getTimeText()}}</span>
      </div>

      <div class="time-box">
        
        <van-datetime-picker
          v-if="selectType === 'date'"
          v-model="date"
          type="date"
          confirm-button-text="确认日期"
          title=""
          @confirm="onDateConfrim()"
          @cancel="visible = false"
        />
        
        <div class="time-list" v-if="selectType === 'time'">
          <van-button icon="calendar-o" class="mt-10" type="danger" size="small" @click="onSelectDate">更改日期</van-button>
          <div class="time-item" :class="{active: time === item}" v-for="item in timeList" :key="item" @click="handleSelectTime(item)">{{item}}</div>
        </div>

      </div>

      <van-button class="confirm-btn" type="danger" block @click="handleConfirm">确定</van-button>
    </van-popup
  >
</template>

<script>
import {getCurrentDays} from '@/libs/utils/utils.js'
import {Toast} from 'vant'
import moment from 'moment'
export default {
  data() {
    return {
      visible: false,
      date: new Date(),
      selectType: 'date',
      time: '',
      dayList: [],
      timeList: []
    }
  },
  methods: {
    show() {
      this.visible = true
      this.selectType = 'date'
    },
    handleLocation() {
    },
    handleSelectTime(item) {
      this.time = item
    },
    handleConfirm() {
      if (!this.time) {
        Toast.fail('请选择配送时间！')
        return
      }
      this.visible = false
      this.$emit('confirm', {date: moment(this.date).format('YYYY-MM-DD'), time: this.time})
    },
    getTimeList() {
      // 最早9点起送
      const timeList = []
      let start = 8
      for(let i = start; i <= 23; i++) {
        const sta = i
        const end = i === 23 ? 23 : i + 1
        timeList.push(`${sta < 10 ? '0' + sta : sta}:00 - ${end < 10 ? '0' + end : end}:${(sta === 23 && end === 23) ? '59' : '00'}`)
      }
      this.timeList = timeList
    },
    getTimeText() {
      return moment(this.date).format('YYYY-MM-DD') + ' ' + this.time
    },
    onSelectDate() {
      this.selectType = 'date'
    },
    onDateConfrim() {
      this.selectType = 'time'
    },
  },
  created() {
    this.getTimeList()
  }
};
</script>

<style lang="scss" scoped>
.time-selector {
  font-size: 14px;
  .head {
    line-height: 48px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #f5f5f5;
    background: #fff;
  }
  .expect-time {
    font-size: 14px;
    line-height: 48px;
    font-weight: bold;
    padding-left: 18px;
    border-bottom: 1px solid #f5f5f5;
  }
  .time-box {
    height: calc(100% - 138px);
    .time-list {
      margin-left: 20px;
      max-height: 100%;
      overflow: auto;
      .time-item {
        line-height: 40px;
        font-weight: bold;
        &.active {
          color: #fc4f47;
        }
      }
    }
  }
  .confirm-btn {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
</style>
